<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>电子日历</title>
	<style>
		#app{
			width:400px;
			margin:auto;
		}
		#d1{
			width:100%;
		}
		#btn1{
			width:25%;
			float:left;
			height:40px;
		}
		#display{
			width:50%;
			float:left;
			text-align:center;
		}
		#btn2{
			width:25%;
			float:left;
			height:40px;
		}
		ul{
			list-style:none;
			top:50px;
		}
		.day{
			width:13%;
			float:left;
		}
		div{
	        text-align:center;
}
	</style>
</head>
<body onload="showDate()">
<div id="app">
	<div id="d1">
		<button id="btn1" onclick="lastMonth()">上个月</button>
		<div id="display"></div>
		<button id="btn2" onclick="nextMonth()">下个月</button>
	</div>
	<div id="d2">
		<ul>
			<li class="day">日</li>
			<li class="day">一</li>
			<li class="day">二</li>
			<li class="day">三</li>
			<li class="day">四</li>
			<li class="day">五</li>
			<li class="day">六</li>
		</ul>
	</div>
	<ul id="d3"></ul>
</div>
<script>
	var d3=document.getElementById("d3");
	var today=new Date();
	var year=today.getFullYear();
	var month=today.getMonth()+1;
	var day1=today.getDate();
	console.log(day1);
	function showMonth(){
		var ds=document.getElementById("display");
		ds.innerHTML=year+"年"+month+"月";
	}
	var allday=0;
	function count(){
		if(month!=2){
			if((month==4)||(month==6)||(month==9)||(month==11)){
				allday=30;
			}else{
				allday=31;
			}
		}else{
			if(((year%4==0)&&(year%100!=0))||((year%400)==0)){
				allday=29;
			}else{
				allday=28;
			}
		}
	}

	function showDate(){
		showMonth();
		count();
		var week=new Date(year,month-1,1);
		var xiqi=week.getDay();
		console.log(xiqi);
		d3.innerHTML="";
		if(xiqi!=0){
			for(var j=0;j<=xiqi;j++){
			   var fill=document.createElement("li");
			   fill.className="day";
			   fill.innerHTML="*"
			   d3.appendChild(fill);
			}
		}

		 for(var i=1;i<=allday;i++){
		 	var fill=document.createElement("li");
		 	fill.className="day";
		 	fill.innerHTML=i+" ";
		 if(i==day1){
		   fill.style.background="red";
		  }
		  d3.appendChild(fill);
		}
	}
	function lastMonth(){
		if(month==1){
			year-=1;
			month=12;
		}else{
			month--;
		}
		showDate();
	}
	function nextMonth(){
		if(month==12){
			year+=1;
			month=1;
		}else{
			month++;
		}
		showDate();
	}

</script>
</body>
</html>